<template>
  <div v-show="false" class="print-bill">
    <div style="margin: 20px; color: #000; font-weight: bold; font-family: 'Microsoft YaHei'">
      <h1 style="text-align: center">
        {{ `${dayjs(checkData.billEndDate).format('YYYY年MM月')}送货明细对账单` }}
      </h1>
      <div class="bill-info">
        <div class="info-item">单位名称：{{ checkData.customerName }}</div>
        <div class="info-item">
          账单起始日期：{{
            `${dayjs(checkData.billStartDate).format('YYYY年MM月DD')}至${dayjs(checkData.billEndDate).format('YYYY年MM月DD')}`
          }}
        </div>
      </div>
      <table border="1" cellpadding="0" cellspacing="0" width="100%" class="erp-font-size-12">
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center">序号</td>
          <td width="150" style="text-align: center">日期</td>
          <td width="150" style="text-align: center">产品名称</td>
          <td width="150" style="text-align: center">规格</td>
          <td width="100" style="text-align: center">单位</td>
          <td width="150" style="text-align: center">数量</td>
          <td width="150" style="text-align: center">单价</td>
          <td width="150" style="text-align: center">金额（元）</td>
          <td width="150" style="text-align: center">含税</td>
          <td width="150" style="text-align: center">备注</td>
        </tr>
        <tr v-for="(item, index) in productList" :key="index" style="line-height: 35px">
          <td
            v-if="index === 0"
            width="100"
            style="text-align: center"
            :rowspan="productList.length"
          >
            本期送货明细
          </td>
          <td width="150" style="text-align: center">
            {{ item.deliveryDate ? dayjs(item.deliveryDate).format('YYYY-MM-DD') : '' }}
          </td>
          <td width="150" style="text-align: center">{{ item.materialName }}</td>
          <td width="150" style="text-align: center">{{ item.spec }}</td>
          <td width="100" style="text-align: center">{{ item.unit }}</td>
          <td width="150" style="text-align: center">{{ item.qty }}</td>
          <td width="150" style="text-align: center">{{ `¥${formatPrice(item.unitPrice)}` }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(decimalRound(item.qty! * item.unitPrice!, 4))}` }}
          </td>
          <td width="150" style="text-align: center">{{ item.isInclTax ? '含税' : '不含税' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center" rowspan="3" colspan="2">本期应收取</td>
          <td width="150" style="text-align: center" colspan="5">{{ '含税' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.curReceivableAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '不含税' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.curReceivableExclTaxAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '合计' }}</td>
          <td width="150" style="text-align: center">
            {{
              `¥${formatPrice(add(checkData.curReceivableExclTaxAmt, checkData.curReceivableAmt))}`
            }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center" rowspan="3" colspan="2">上期末剩余未收取</td>
          <td width="150" style="text-align: center" colspan="5">{{ '对公' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.historyUnreceiveAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '对私' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.historyUnreceiveExclTaxAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '合计' }}</td>
          <td width="150" style="text-align: center">
            {{
              `¥${formatPrice(add(checkData.historyUnreceiveAmt, checkData.historyUnreceiveExclTaxAmt || 0))}`
            }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center" rowspan="3" colspan="2">本期已收取明细</td>
          <td width="150" style="text-align: center" colspan="5">{{ '对公' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.curReceivedAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '对私' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.curReceivedExclTaxAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '合计' }}</td>
          <td width="150" style="text-align: center">
            {{
              `¥${formatPrice(add(checkData.curReceivedAmt || 0, checkData.curReceivedExclTaxAmt || 0))}`
            }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center" colspan="2">核销</td>
          <td width="150" style="text-align: center" colspan="5">{{ '对私' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.writeAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="100" style="text-align: center" rowspan="3" colspan="2">本期末累计未收取</td>
          <td width="150" style="text-align: center" colspan="5">{{ '对公' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.remainReceivableAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '对私' }}</td>
          <td width="150" style="text-align: center">
            {{ `¥${formatPrice(checkData.remainReceivableExclTaxAmt)}` }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
        <tr style="line-height: 35px">
          <td width="150" style="text-align: center" colspan="5">{{ '合计' }}</td>
          <td width="150" style="text-align: center">
            {{
              `¥${formatPrice(add(checkData.remainReceivableAmt || 0, checkData.remainReceivableExclTaxAmt || 0))}`
            }}
          </td>
          <td width="150" style="text-align: center">{{ '' }}</td>
          <td width="150" style="text-align: center">{{ '' }}</td>
        </tr>
      </table>
      <div></div>
      <div class="company-info">
        <div style="line-height: 25px">
          <div>{{ userStore.tenantName }}</div>
          <div>制表日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
        </div>
        <div style="line-height: 25px">
          <div>{{ checkData.customerName }}</div>
          <div>日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { AccountsResItem } from '@renderer/api/statement'
import { useUserStore } from '@renderer/store'
import { formatPrice, decimalRound } from '@renderer/utils/mixins'
import dayjs from 'dayjs'
import { add, isEmpty } from 'lodash-es'

interface Props {
  checkData: AccountsResItem
}

const props = withDefaults(defineProps<Props>(), {
  checkData: () => ({
    batchCount: 0,
    purchaseNum: 0,
    billId: '',
    customerName: '',
    customerId: '',
    curReceivableAmt: 0,
    curReceivableExclTaxAmt: 0,
    historyUnreceiveAmt: 0,
    curReceivedAmt: 0,
    writeAmt: 0,
    remainReceivableAmt: 0,
    sellers: '',
    billDesc: '',
    billType: 0,
    remark: '',
    detailList: [],
    createdDt: '',
    billTime: [],
    billStartDate: '',
    billEndDate: '',
    historyUnreceiveExclTaxAmt: 0,
    curReceivedExclTaxAmt: 0,
    remainReceivableExclTaxAmt: 0
  })
})
const userStore = useUserStore().localUserInfo
const productList = ref<any[]>([])

watch(
  () => props.checkData,
  () => {
    productList.value = formatData(props.checkData.detailList)
  }
)

function formatData(baseData: any[]): any[] {
  return baseData
    ?.map((item) => {
      if (!isEmpty(item.detailList)) {
        return item.detailList?.map((detailItem, index) => {
          if (index === 0) {
            return { ...detailItem, ...item, span: item.detailList.length }
          } else {
            return { ...detailItem, ...item }
          }
        })
      } else {
        return [item]
      }
    })
    .flat()
}

//打印详情
const printInfo = () => {
  const element = document.createElement('div')
  element.innerHTML = (document as any).querySelector('.print-bill').innerHTML
  document.body.appendChild(element)
  ;(document as any).querySelector('#app').style.display = 'none'
  window.onafterprint = () => {
    ;(document as any).querySelector('#app').style.display = 'block'
    document.body.removeChild(element)
  }
  window.print()
}
defineExpose({ printInfo })
</script>
<style scoped lang="less">
.slogan {
  margin: 20px 0;
  text-align: center;
  font-size: 16px;
}

.bill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;

  .info-item {
    // flex: 1;
  }
}

.company-info {
  display: flex;
  padding: 0px 20px;
  justify-content: space-between;
  width: 100%;
}
</style>
